<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="layui/css/layui.css" media="all">
	<script src="layui/layui.js" charset="utf-8"></script>
</head>
<body>
    <form class="layui-form layui-form-pane">
                <div class="layui-form-item">
                    <label class="layui-form-label">卡片标题</label>
                    <div class="layui-input-inline">
                        <input type="text" name="realName"id="realName" placeholder="" class="layui-input">
                    </div>
                    <label class="layui-form-label">卡片名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="username"id="username" placeholder="" class="layui-input">
                    </div>
                    <div class="layui-inline">
                        <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon">&#xe615;</i> 搜 索</button>
                    	<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-btn"><i class="layui-icon">&#xe615;</i> 获取数据</button>
                    </div>
                </div>
    </form>
	<div id="currentTableId" lay-filter="currentTableFilter"></div>
	<script type="text/html" id="currentTableBar">
		<a class="layui-btn layui-btn-sm layui-btn-normal data-info-btn" lay-event="details"><i class="layui-icon">&#xe60b;</i></a>
	</script>
	<script>
	layui.config({
      base: 'extend/' //配置 layui 第三方扩展组件存放的基础目录
    }).extend({
      cardTable: 'cardTable/cardTable' 
    }).use(['layer', 'form', 'jquery', 'cardTable'], function () {
			let form = layui.form;
			let $ = layui.jquery;
            let layer = layui.layer;
            let cardTable = layui.cardTable;

            var currentTable = cardTable.render({
                elem: '#currentTableId',
				//此为动态
				//url: '/card.json', 
				//此为静态
				limit: 12, //每页数量默认是每行数量的双倍
				linenum: 4, //每行数量 2,3,4,6
				data:[{
						"id": "1",
						"image": "https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png",
						"title": "Alipay",
						"remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
						"time": "几秒前"
					},{
						"id": "2",
						"image": "https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png",
						"title": "Layui",
						"remark": "生命就像一盒巧克力，结果往往出人意料",
						"time": "几秒前"
					},{
						"id": "3",
						"image": "https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png",
						"title": "Angular",
						"remark": "希望是一个好东西，也许是最好的，好东西是不会消亡的",
						"time": "几秒前"
					},
					{
						"id": "4",
						"image": "https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png",
						"title": "React",
						"remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
						"time": "几秒前"
					},{
						"id": "5",
						"image": "https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png",
						"title": "Alipay",
						"remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
						"time": "几秒前"
					},{
						"id": "6",
						"image": "https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png",
						"title": "Layui",
						"remark": "生命就像一盒巧克力，结果往往出人意料",
						"time": "几秒前"
					},{
						"id": "7",
						"image": "https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png",
						"title": "Angular",
						"remark": "希望是一个好东西，也许是最好的，好东西是不会消亡的",
						"time": "几秒前"
					},
					{
						"id": "8",
						"image": "https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png",
						"title": "React",
						"remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
						"time": "几秒前"
					},{
						"id": "9",
						"image": "https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png",
						"title": "Alipay",
						"remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
						"time": "几秒前"
					},{
						"id": "10",
						"image": "https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png",
						"title": "Layui",
						"remark": "生命就像一盒巧克力，结果往往出人意料",
						"time": "几秒前"
					},{
						"id": "11",
						"image": "https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png",
						"title": "Angular",
						"remark": "希望是一个好东西，也许是最好的，好东西是不会消亡的",
						"time": "几秒前"
					},
					{
						"id": "12",
						"image": "https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png",
						"title": "React",
						"remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
						"time": "几秒前"
					},{
						"id": "13",
						"title": "Alipay",
						"remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
						"time": "几秒前"
					},{
						"id": "14",
						"title": "Layui",
						"remark": "生命就像一盒巧克力，结果往往出人意料",
						"time": "几秒前"
					},{
						"id": "15",
						"title": "Angular",
						"remark": "希望是一个好东西，也许是最好的，好东西是不会消亡的",
						"time": "几秒前"
					},
					{
						"id": "16",
						"title": "React",
						"remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
						"time": "几秒前"
					},{
						"id": "17",
						"title": "Alipay",
						"remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
						"time": "几秒前"
					},{
						"id": "18",
						"title": "Layui",
						"remark": "生命就像一盒巧克力，结果往往出人意料",
						"time": "几秒前"
					},{
						"id": "19",
						"title": "Angular",
						"remark": "希望是一个好东西，也许是最好的，好东西是不会消亡的",
						"time": "几秒前"
					},
					{
						"id": "20",
						"title": "React",
						"remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
						"time": "几秒前"
					},{
						"id": "21",
						"title": "Alipay",
						"remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
						"time": "几秒前"
					},{
						"id": "22",
						"title": "Layui",
						"remark": "生命就像一盒巧克力，结果往往出人意料",
						"time": "几秒前"
					},{
						"id": "23",
						"title": "Angular",
						"remark": "希望是一个好东西，也许是最好的，好东西是不会消亡的",
						"time": "几秒前"
					},
					{
						"id": "24",
						"remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
						"time": "几秒前"
					}],
					toolbar:'currentTableBar',
			})
            // 监听搜索操作
			form.on('submit(data-search-btn)', function (data) {
                queryJson = data.field;
                cardTable.reload("currentTableId", {
                    where: queryJson,
                });
                return false;
            });
			//卡片单击事件
            currentTable.on('row(currentTableFilter)', function (obj) {
                layer.msg("单击事件");
                return false;
			});
            //卡片双击事件
            currentTable.on('rowDouble(currentTableFilter)', function (obj) {
                layer.msg("双击事件");
                return false;
            });
            //toolrow监听事件
            currentTable.on('tool(currentTableFilter)', function (obj) {
                if (obj.event === 'details') {
                    layer.msg("按钮事件");
                }
                return false;
            });
			form.on('submit(data-btn)', function () {
				var data = cardTable.getAllData("currentTableId");
                layer.msg(JSON.stringify(data));
				return false;
			});
		})
	</script>
</body>
</html>